<extend name="template/base_index2" />

<block name="area_header">

    <style type="text/css">
        html{
            font-size: 10px;
        }
        /**
         * 顶部样式
         */
        .header{
            background: #FFFFFF;
        }
        .header{
            font-size: 16px;
        }
        .header .am-topbar{
            font-size: 18px;
            padding: 5px 16px;
            min-height: 20px;
            margin-bottom: 0px;
        }
        .am-with-topbar-fixed-top {
            padding-top:  39px;
        }
        .theme-shop .am-gotop-fixed{
            width: 32px;
            height: 32px;
            bottom: 64px;
        }
        .theme-shop .am-gotop-fixed .am-gotop-icon {
            width: 32px;
            height: 32px;
            line-height: 28px;
        }
        .myorder .am-tabs-nav{
            width:100%;
        }
        .myorder .am-nav-tabs>li{
            width:20%;
        }
        .myorder .am-nav-tabs>li>a{
            font-size: 1.2rem;
            margin: 0px;
        }
        .myorder .am-nav-tabs>li.am-active>a{
            border: 0px;
            color: #F72E5C;
            background-color: #FAF2F2;
            border-bottom: 1px solid #F72E5C;
            cursor: default;
        }
        .myorder .empty{
            padding: 20px 0px;
        }
        .myorder .empty i{
            font-size: 32px;
        }

        .item-p-list{

        }

        .item-p-list .item-p{
            position: relative;
            font-size: 0.9rem;
            border-bottom: 1px solid #E2E2E1;
            height: 60px;

        }
        .item-p img{
            width: 36px;
            height: 48px;
            position: absolute;
        }
        .item-p .pc-wrp{
            position: absolute;
            right: 0px;
            top:0px;
            line-height: 1.0;

        }
        .item-p .p-name{
            height: 2rem;
            line-height: 1;
            width: 100%;
            padding-left: 50px;
            padding-right: 70px;

        }
        .item-p .p-desc{
            height: 1rem;
            line-height: 1;
            width: 100%;
            padding-left: 50px;
            padding-right: 70px;
        }
        .myorder .order-item{
            background: #FFFFFF;
            padding: 10px;
            margin: 10px 0px;
        }
        .order-item>a{
            color: #414649;
        }
        .am-tabs-bd .am-tab-panel{
            padding: 0px;
        }

        .am-icon-weixin{
            color: #DA955C;
        }
        .store-info-wrp{
            border-bottom: 1px solid #E2E2E1;
            margin-bottom: 10px;
        }
    </style>


</block>

<block name="area_body">

    <div class="header">
        <div class="am-topbar am-topbar-default am-topbar-fixed-top"><a href="{:U('Shop/User/info')}"><i class="am-icon-chevron-left"></i>&nbsp;&nbsp;我的订单</a> <a href="{:U('Shop/Index/index')}"><i class="am-icon-home am-icon-sm am-fr"></i></a></div>

    </div>
    <div class="myorder">

        <div class="am-tabs" data-am-tabs="{noSwipe: 1}">
            <ul id="tabs" class="am-tabs-nav am-nav am-nav-tabs">
                <li class="<eq name='datatype' value='0' >am-active</eq> "><a href="#tab1" data-type='0' >全部</a></li>
                <li class="<eq name='datatype' value='1' >am-active</eq> "><a href="#tab2" data-type='1' >待付款</a></li>
                <li class="<eq name='datatype' value='2' >am-active</eq> "><a href="#tab3" data-type='2' >待发货</a></li>
                <li class="<eq name='datatype' value='3' >am-active</eq> "><a href="#tab4" data-type='3' >待收货</a></li>
                <li class="<eq name='datatype' value='4' >am-active</eq> "><a href="#tab5" data-type='4' >待评价</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade <eq name='datatype' value='0' >am-in am-active</eq> " id="tab1">

                    <div class="panel"></div>
                    <div class="empty am-text-center  am-hide">
                        <div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
                        <div class="am-text-sm am-padding-sm">您还没有相关订单</div>
                        <div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
                        <div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
                    </div>
                </div>
                <div class="am-tab-panel am-fade <eq name='datatype' value='1' >am-in am-active</eq> " id="tab2">
                    <div class="panel"></div>
                    <div class="empty am-text-center  am-hide">
                        <div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
                        <div class="am-text-sm am-padding-sm">您还没有相关订单</div>
                        <div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
                        <div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
                    </div>

                </div>
                <div class="am-tab-panel am-fade <eq name='datatype' value='2' >am-in am-active</eq> " id="tab3">
                    <div class="panel"></div>
                    <div class="empty am-text-center  am-hide">
                        <div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
                        <div class="am-text-sm am-padding-sm">您还没有相关订单</div>
                        <div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
                        <div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
                    </div>

                </div>
                <div class="am-tab-panel am-fade <eq name='datatype' value='3' >am-in am-active</eq> " id="tab4">
                    <div class="panel"></div>
                    <div class="empty am-text-center am-hide">
                        <div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
                        <div class="am-text-sm am-padding-sm">您还没有相关订单</div>
                        <div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
                        <div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
                    </div>

                </div>
                <div class="am-tab-panel am-fade <eq name='datatype' value='4' >am-in am-active</eq> " id="tab5">
                    <div class="panel"></div>
                    <div class="empty am-text-center am-hide">
                        <div><i class="am-link-muted am-icon-list-alt am-icon-lg"></i></div>
                        <div class="am-text-sm am-padding-sm">您还没有相关订单</div>
                        <div class="am-text-xs am-link-muted  am-padding-sm">可以去看看有哪些想买的</div>
                        <div><a href="{:U('Shop/Index/index')}" class="am-btn am-btn-xs am-btn-primary">随便逛逛</a></div>
                    </div>
                </div>
            </div>
        </div>



    </div>
</block>

<block name="area_footer">
    <script id="ordertemplate" type="text/x-handlebars-template">
        {{#each data}}

        <div class="order-item">
            <div class="store-info-wrp am-cf  am-text-xs am-margin-bottom-xs">
                <div class="store-info am-fl">
                    <img  src="{{_store.logo}}" alt="logo" class="am-fl am-margin-bottom-xs am-margin-right-xs am-responsive-width am-thumbnail am-radius" style="width: 20px;" />
                    <span class="am-margin-right-xs am-text-xs">{{_store.name}}<i class="am-icon-chevron-right am-margin-left-xs"></i></span>
                    <!--<span class="am-text-xs"><i class="am-icon-weixin am-margin-right-xs"></i>{{_store.wxno}}</span>-->
                </div>
                <div class="order_status  am-text-danger am-fr">{{order_status_desc}}</div>

            </div>
            <a href="{:U('Shop/Orders/view')}?id={{orderid}}">

                <div class="item-p-list">
                    {{#each _items}}
                    <div class="item-p am-margin-top-xs am-cf">
                        <img src="{{img}}" class="am-fl" alt="商品图片" />
                        <div class="p-name am-text-truncate">{{name}}</div>
                        <div class="p-desc am-text-truncate">{{sku_desc}}</div>
                        <div class="pc-wrp am-fr">
                            <div class="p-price"><h6>¥{{price}}</h6></div>
                            <div class="p-count am-link-muted am-text-xs am-text-right">x{{count}}</div>
                        </div>
                    </div>
                    {{/each}}
                </div>


            </a>
            <div class="btn-controls  am-padding-sm am-text-right">
                <!--
                    作者：hebiduhebi@126.com
                    时间：2015-05-02
                    描述：根据订单状态来显示可操作按钮
                    1. 待付款 － 立即支付，取消订单
                    2. 待发货 － 提醒发货，
                    3. 待评价 － 立即评价
                    4. 待收货 － 确认收货
                    5. 全部 － 删除订单［］
                -->
                {{#eq pay_status 0}}
                <a href="{:U('Shop/OnlinePay/pay')}?id={{orderid}}" class="am-btn-xs am-btn am-btn-primary">立即支付</a>
                <a href="{:U('Shop/Orders/cancelOrder')}?id={{orderid}}" data-tip="确定取消订单?操作无法恢复!" class="ajax-get confirm am-btn-xs am-btn am-btn-default">取消订单</a>
                {{/eq}}

                {{#eq pay_status 5}}

                <span class="am-text-xs">您选择了货到付款,请准备好现金，送货员马上就到！</span><br/>
                {{/eq}}

                {{#eq order_status 3}}
                <span class="am-text-xs">店铺微信号: {{_store.wxno}},联系电话: <a href="tel:{{_store.service_phone}}">{{_store.service_phone}}</a></span>
                <!--<a class="am-btn-xs am-btn am-btn-default">提醒发货</a>-->
                {{/eq}}
                <!--<a class="am-btn-xs am-btn am-btn-default">立即评价</a>-->

                {{#eq order_status 4}}
                <a href="{:U('Shop/Orders/confirmReceive')}?id={{orderid}}" data-tip="确定收到货了?" class="ajax-get confirm am-btn-xs am-btn am-btn-primary">确认收货</a>
                {{/eq}}

                {{#eq order_status 5}}
                <a href="{:U('Shop/Orders/evaluation')}?id={{orderid}}" class="am-btn-xs am-btn am-btn-secondary">订单评价</a>
                {{/eq}}


                {{#eq order_status 12}}
                <span class="am-text-xs am-text-danger">因卖家退回订单,若您已支付,将退款给您,请注意核查!</span>
                {{/eq}}
                <!--<a class="am-btn-xs am-btn am-btn-primary">删除订单</a>-->

            </div>
        </div>
        {{/each}}
    </script>

    <script type="text/javascript" src="__CDN__/handlebar/3.0.3/handlebars.js?v=1.0"></script>

    <script type="text/javascript">
        function eq(v1,v2,options){
            if(v1 == v2){
                //满足添加继续执行
                return options.fn(this);
            }else{
                //不满足条件执行
                return options.inverse(this);
            }
        }




        $(function(){

            window.boye = {
                ajaxing:false,
                prevType:'',
                currentType:'',
                currentPage:0,
                template:'',
            };
            window.boye.prevType = window.boye.currentType = $("#tabs .am-active").find("a").attr("data-type");
            var source  = $("#ordertemplate").html();
            window.boye.template = Handlebars.compile(source);
            Handlebars.registerHelper("eq",eq);

            $('#tabs').find('a').on('opened.tabs.amui', function(e) {
                console.log('[%s] 选项卡打开了', $(this).text());

                var $ele = loadingMsg();
                if(window.boye.ajaxing){
                    console.log("Waiting ajax!");
                    return ;
                }
                window.boye.prevType = window.boye.currentType;
                window.boye.currentType = parseInt($(this).attr("data-type"));

                window.boye.ajaxing = false;

                queryOrders($ele);

            });

            var $ele = loadingMsg();
            queryOrders($ele);
            window.boye.currentPage++;

            window.boye.prevScrollY = 0;
            window.boye.directionY = 1;
            $(window).on("scroll",function(ev){

                if(window.boye.prevScrollY - $(window).scrollTop() > 0){
                    window.boye.directionY = -1;
                }else{
                    window.boye.directionY = 1;
                }

                window.boye.prevScrollY = $(window).scrollTop();

                if(window.boye.directionY == 1 && $(document).height() - $(window).height() - $(window).scrollTop() < 10){
                    var $ele = loadingMsg();
                    queryOrders($ele);
                }
            });

        })

        function queryOrders($ele){
            console.log(window.boye);
            //上一次type 不等于这一次 说明不是滚动获取
            if(window.boye.prevType != window.boye.currentType){
                window.boye.currentPage = 1;
            }
            $.ajax({
                url:"{:U('Shop/Orders/orderlist')}",
                type:"POST",
                data: {type:window.boye.currentType,p:window.boye.currentPage},
                dataType:"json",
                beforeSend:function(){
                    window.boye.ajaxing = true;
                }
            }).always(function(){
                $ele.modal("close");
                window.boye.ajaxing = false;

            }).done(function(data){
                window.boye.currentPage++;
//					console.log(data);
                if(data.status){
                    console.log(data.info,'获取的订单数据');
                    var type = parseInt(window.boye.currentType) + 1;
                    var panel = $("#tab"+type).find(".panel");
                    var orders = panel.find(".order-item");
                    console.log(orders);

                    if(!data.info ||  (orders.length == 0 && data.info.length == 0)){
                        $("#tab"+type).find(".empty").removeClass("am-hide");
                        $("#tab"+type).find(".panel").html("");
                    }else{
                        if(data.info.length == 0){
                            console.log("数据为空");
                        }else{
                            $("#tab"+type).find(".empty").addClass("am-hide");
                            var html = window.boye.template({data:data.info});
//								console.log($("#tab"+type).find(".panel"));
                            if(window.boye.prevType != window.boye.currentType){
                                $("#tab"+type).find(".panel").html(html);
                            }else{
                                $("#tab"+type).find(".panel").html($("#tab"+type).find(".panel").html()+html);
                            }

                            window.hbd_mobile.rebindAjaxGet("#tab"+type+" .ajax-get");
                        }

                    }

                }else{
                    alertMsg(data.info);
                }
            }).fail(function(data){
                alertMsg(data.responseText);
            });
        }
    </script>

</block>